<template>
    <div class="WactiveCenter">
        <div class="top" >活动中心</div>
        <div class="bottom" >
            <div class="bottom-img" v-for="item in dt" :style="{backgroundImage:'url('+item.imgurl+')'}">

            </div>
            <div class="bottom-black">

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WactiveCenter",
        data(){
          return {
              dt:[]
          }
        },
        methods:{
            getlist(){
                this.$axios.get('/api/wactive.json').then((res) => {
                    if (res.data.ret) {
                        this.dt = res.data.data
                    }
                }).catch((error) => {})
            }
        },
        mounted() {
            this.getlist()
        }
    }
</script>

<style scoped>
    .WactiveCenter .top{
        width: 100%;
        height: 50px;
        padding-left:20px;
        padding-top: 15px;
        font-weight: 600;
        box-sizing: border-box;
        border-bottom:1px solid rgba(133,144,166,.12);
    }
    .WactiveCenter .bottom{
        width: 100%;
        height: 1450px;
        box-sizing: border-box;
        background: white;
        /*border: 1px solid red;*/
    }
    .bottom-img:nth-of-type(n){
        margin-left: 20px;
        margin-top: 20px;
        display: inline-block;
        box-sizing: border-box;
        width: 46.2%;
        height: 260px;
        border-radius: 8px;
        /*background-image: url("https://pic2.zhimg.com/v2-fe12b3a61678e4c210f8f5363f1afc0e.jpg?source=8c23436a");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .bottom-img:nth-of-type(2n){
        margin-right: 20px;
        margin-top: 20px;
        display: inline-block;
        box-sizing: border-box;
        width: 46.2%;
        height: 260px;
        border-radius: 8px;
        /*background-image: url("https://pic2.zhimg.com/v2-fe12b3a61678e4c210f8f5363f1afc0e.jpg?source=8c23436a");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .bottom-black{
        width: 46.2%;
        height: 260px;
        margin-left: 20px;
        margin-top: 20px;
        display: inline-block;
        border-radius: 8px;
        float: top;
        border: 1px solid rgba(133,144,166,.12);
        background-image: url("https://static.zhihu.com/heifetz/assets/coming-soon.b5aa31c7.png");
        background-repeat: no-repeat;
        background-size:50% 50% ;
        background-position: center;
        /*flex-direction: column;*/
        /*-webkit-box-pack: center;*/
    }
</style>
